<template>
    <div class="mine">
        <van-nav-bar title="我的账户" left-text="" left-arrow @click-left="goback" />
        <div class="wrapper">
            <MessageVue @openMsg="msgHandler" :headerImg="headerImg" />
            <MyItemVue />
            <GuessULikeVue :goodsData="goodsData" @go="handler"></GuessULikeVue>
        </div>
        <DockerVue :navActive="navActive"></DockerVue>
        <van-popup
            v-model:show="show"
            position="bottom"
            :style="{ width: '100%', height: '1rem' }"
            round
        >
            <div class="upload_box" @click="uploadBtn">更换头像</div>
        </van-popup>
        <van-popup v-model:show="showUpload" round>
            <template #default>
                <div class="uploading">
                    <div class="file_box">
                        <van-uploader
                            v-model="fileList"
                            multiple
                            :max-count="1"
                            :after-read="uploadHandler"
                        />
                    </div>
                    <div class="upload_btn">
                        <van-button icon="plus" type="primary" @click="uploading">
                            上传头像
                        </van-button>
                    </div>
                </div>
            </template>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: 'mine',
};
</script>

<script setup>
import DockerVue from '@/components/Docker.vue';
import MessageVue from './components/Message.vue';
import MyItemVue from './components/MyItem.vue';
import GuessULikeVue from './components/GuessULike.vue';
import { Toast } from 'vant';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { reactive, ref } from 'vue';
import { request, requestGetNT, requestPost, requestPut, upLoader } from '@/utils/Request';

const navActive = ref(3);
let goodsData = ref([]);
let router = useRouter();
let store = useStore();
let show = ref(false);
let showUpload = ref(false);
let token = store.state.user.token;
let headerChangeData = {
    name: '',
    password: 'abc123456',
    phone: '13642329574',
    header_img: '',
};
let headerImg = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg');
const goback = () => {
    store.commit('changeRouterType', 'back');
    router.back();
};
const msgHandler = () => {
    if (token) {
        show.value = true;
    } else {
        router.push('/login');
    }
};
const uploadBtn = () => {
    showUpload.value = true;
    show.value = false;
};
const fileList = ref([]);
const uploadHandler = async file => {
    let res = await upLoader('/update', { file: file });
    headerImg.value = res.data.result.path;
};
const uploading = async () => {
    headerChangeData.name = store.state.user.userName;
    headerChangeData.header_img = headerImg.value;
    let userId = store.state.user.userId;
    let res = await requestPut(`/user/${userId}`, token, headerChangeData);
    showUpload.value = false;
};

// 瀑布流
let params = reactive({
    project_id: 238,
    page: 2,
    limit: 6,
});
const getGoods = async () => {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
    });
    const res = await requestGetNT('/goods', params); //自己的项目：238
    goodsData.value = goodsData.value.concat(res.data.result.rows);
};

getGoods();
const handler = () => {
    if (params.page < 5) {
        params.page++;
        getGoods();
    }
};
</script>

<style lang="scss" scoped>
.wrapper {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    background-color: #f1f1f1;
    overflow-y: scroll;
    overflow-x: hidden;
    &::before {
        content: '';
        position: absolute;
        top: -70%;
        left: -30%;
        width: 6rem;
        height: 6rem;
        border-radius: 3rem;
        background-image: linear-gradient(239deg, #3a6ff3 0%, #50c7fb 100%);
    }
}

.upload_box {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.2rem;
    color: #555555;
    border-bottom: 0.01rem solid #f1f1f1;
}

.uploading {
    box-sizing: border-box;
    width: 2rem;
    height: 2.5rem;
    padding-top: 0.5rem;
    background-color: #f1f1f1;
    .file_box {
        width: 0.8rem;
        height: 0.8rem;
        margin: 0 auto;
    }
    .upload_btn {
        width: 1.1rem;
        height: 0.5rem;
        margin: 0.2rem auto;
    }
}
</style>
